<template>
  <div class="hello">
    <div class="mis-btn">
      <button @click="downLoad('my-table','表格下载')">下载（表格底线）</button>
      <button @click="downLoad2('my-table','表格下载')">下载</button>
    </div>
    <table id="pdfDown"></table>
    <table id="my-table" class="my-table">
      <!-- <tr>
        <td colspan="5">
          <img src="@/assets/logo.png" alt />
        </td>
      </tr>-->
      <tr>
        <td :width="leftTitleWidth">统计范围</td>
        <td colspan="4">
          <span>2020-07-02</span> -
          <span>2020-07-03</span>
        </td>
      </tr>
      <tr>
        <td :width="leftTitleWidth" rowspan="2">预警量</td>
        <td :width="titleContent" colspan="2">全部预警信息（条）</td>
        <td :width="leftTitleWidth" colspan="2">{{tableData.warningCount}}</td>
      </tr>
      <tr>
        <td :width="titleContent">违法信息(条)</td>
        <td :width="leftTitleWidth">{{tableData.illegaCount}}</td>
        <td :width="titleContent">不良信息(条)</td>
        <td :width="leftTitleWidth">{{tableData.badCount}}</td>
      </tr>
      <tr v-for="(item,index) in tableData.wf.children" :key="'120'+index">
        <td
          v-if="index==0"
          :rowspan="tableData.wf.children.length"
          :width="leftTitleWidth"
        >{{tableData.wf.typeName}}</td>
        <td colspan="3" class="typeContent typeContent-left">{{item.typeSketch}}</td>
        <td :width="titleContent">{{item.count}}</td>
      </tr>
      <tr v-for="(item,index) in tableData.yh.children" :key="'12'+index">
        <td
          v-if="index==0"
          :rowspan="tableData.yh.children.length"
          :width="leftTitleWidth"
        >{{tableData.wf.typeName}}</td>
        <td colspan="3" class="typeContent typeContent-left">{{item.typeSketch}}</td>
        <td :width="titleContent">{{item.count}}</td>
      </tr>
      <template v-for="(item,index) in tableData.ptimeDic">
        <tr :key="index" v-if="index%2==0">
          <td
            v-if="index==0"
            :rowspan="Math.ceil(tableData.ptimeDic.length/2)"
            :width="leftTitleWidth"
          >各媒介预警数</td>
          <td>{{tableData.ptimeDic[index].name}} ({{tableData.ptimeDic[index].value}})</td>
          <td>{{tableData.ptimeDic[index].count}}</td>
          <td>{{tableData.ptimeDic[index+1].name}} ({{tableData.ptimeDic[index+1].value}})</td>
          <td>{{tableData.ptimeDic[index+1].count}}</td>
        </tr>
      </template>
      <tr>
        <td :width="leftTitleWidth">预警活跃网站（Top5)</td>
        <td colspan="4" class="typeContent typeContent-left">
          <div v-if="tableData.pwebBasicInfo.length>0">
            <div
              class="typeContent-list"
              v-for="(item,index) in tableData.pwebBasicInfo"
              :key="'y'+index"
            >
              {{index+1}}、{{item.siteName}} {{item.count}}条预警
              <span
                v-if="(tableData.pwebBasicInfo.length-1)==index"
              >。</span>
              <span v-else>;</span>
              <br />
            </div>
          </div>
          <div v-else>暂无数据</div>
        </td>
      </tr>
      <tr>
        <td :width="leftTitleWidth">统计分析333</td>
        <td colspan="4" class="typeContent typeContent-left">
          <div class="typeContent-list">{{tableData.analysis}}</div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      leftTitleWidth: 100,
      titleContent: 150,
      tableData: {
        ptimeDic: [
          { color: "", count: 1, id: "", name: "网站", path: "", value: "100%" },
          { color: "", count: 0, id: "", name: "百家号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "微博", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "网易号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "新浪看点", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "快传号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "趣头条", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "东方号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "北京时间", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "微信公众号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "企鹅号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "大风号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "大鱼号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "一点号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "搜狐号", path: "", value: "0% " },
          { color: "", count: 0, id: "", name: "其它", path: "", value: "0% " }
        ],
        wf: {
          typeName: "违法违规信息",
          children: [
            { typeSketch: '(一)、反对宪法', count: 0 },
            { typeSketch: '(二)、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一', count: 0 },
            { typeSketch: '(三)、危害国家荣誉和利益', count: 0 },
            { typeSketch: '(四)、歪曲、丑化、亵渎、否定英雄烈士事迹', count: 0 },
            { typeSketch: '(五)、宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动', count: 0 },
            { typeSketch: '(六)、煽动民族仇恨、民族歧视，破坏民族团结', count: 0 },
            { typeSketch: '(七)、破坏国家宗教政策，宣扬邪教和封建迷信', count: 0 },
            { typeSketch: '(八)、执法部门暴力执法', count: 0 }
          ]
        },
        yh: {
          typeName: "有害信息",
          children: [
            { typeSketch: '(一)、散布谣言，扰乱经济秩序和社会秩序', count: 0 },
            { typeSketch: '(二)、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪', count: 0 },
            { typeSketch: '(三)、侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益', count: 0 },
            { typeSketch: '(四)、法律、行政法规禁止的其他内容', count: 0 },
            { typeSketch: '(五)、使用夸张标题，内容与标题严重不符的', count: 0 },
            { typeSketch: '(六)、炒作绯闻、丑闻、劣迹等', count: 0 },
            { typeSketch: '(七)、不当评述自然灾害、重大事故等灾难', count: 0 },
            { typeSketch: '(八)、带有性暗示、性挑逗等易使人产生性联想', count: 0 },
            { typeSketch: '(九)、展现血腥、惊悚、残忍等致人身心不适', count: 0 },
            { typeSketch: '(十)、煽动人群歧视、地域歧视等', count: 0 },
            { typeSketch: '(十一)、宣扬低俗、庸俗、媚俗内容', count: 0 },
            { typeSketch: '(十二)、可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好', count: 0 },
            { typeSketch: '(十三)、其他对网络生态造成不良影响的内容', count: 0 },
            { typeSketch: '(十四)、相关民生', count: 0 }
          ]
        },
        pwebBasicInfo: [
          { siteName: "西安众擎电子", count: 123 },
          { siteName: "西安众擎电子", count: 123 },
          { siteName: "西安众擎电子", count: 123 },
          { siteName: "西安众擎电子", count: 123 },
          { siteName: "西安众擎电子", count: 123 },
          { siteName: "西安众擎电子", count: 123 },
          { siteName: "西安众擎电子", count: 123 },
        ],
        warningCount: 600,
        illegaCount: 150,
        badCount: 110,
        "analysis": "统计分析 经统计分析，今日自动巡查到预警12条，其中违法信息1条，占比8%；不良信息11条，占比92%。违法信息中，(一)、(二)、(三)类的预警量最高；不良信息中，(一)、(二)、(三)类的预警量最高。媒介预警量Top3：网站1条，占比100%；百家号0条，占比0%；微博0条，占比0%。以上列举的网站、自媒体账号，预警活跃最高。",
      }
    }
  },
  methods: {
    downLoad(pdfName, pdfTitle) {
      this.downPDF(pdfName, pdfTitle)
    },
    downLoad2(pdfName, pdfTitle) {
      this.getPdf(pdfName, pdfTitle)
    },
  }
}
</script>

<style scoped>
.my-table {
  width: 700px;
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
  border-left: 1px solid #444;
  border-top: 1px solid #444;
  text-align: left;
}
td {
  border-right: 1px solid #444;
  border-bottom: 1px solid #444;
  padding: 10px 10px;
  line-height: 24px;
  position: relative;
  text-align: center;
  font-size: 15px;
}
.typeContent-left {
  text-align: left !important;
}
.tableTitle {
  width: 100px;
  display: inline-block;
}
.mis-btn {
  text-align: center;
  margin: 40px 0;
}
.mis-btn button {
  padding: 6px 24px;
  border: none;
  background-color: #4170dc;
  color: #fff;
}
</style>
